<template>
  <div class="header">
    <t-button @click="toggleCollapsed" shape="circle" variant="text">
      <menu-fold-icon v-if="collapsed" slot="icon" />
      <menu-unfold-icon v-if="!collapsed" slot="icon"
    /></t-button>
  </div>
</template>
<script>
import { MenuUnfoldIcon, MenuFoldIcon } from 'tdesign-icons-vue';
// import { Menu } from 'tdesign-vue';

export default {
  name: 'Header',
  //vue组件名，文件名
  components: {
    MenuUnfoldIcon,
    MenuFoldIcon,
  },
  props: {
    collapsed: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    toggleCollapsed() {
      // event 弃用：课时,目前这里有bug，未实现伸缩功能
      this.$emit( 'on-toggle-collapsed', !this.$props.collapsed);
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
</style>
